<template>
  <ElCard>
    <el-form :model="formModel" ref="formRef" :show-message="false" size="small">
      <CardBox header="体育锻炼">
        <ElFormItem label="锻炼频率">
          <ElRadioGroup
            v-model="formModel.a00_04_24"
            @change="
              handleStringIncludeClear($event, '4', [
                'a00_04_25',
                'a00_04_26',
                'a00_04_27_v',
                'a00_04_27_v',
                'a00_04_27_s',
              ])
            "
          >
            <ElRadio
              v-for="(value, key) in formSource.a00_04_24"
              :key="key"
              :label="key"
              >{{ value }}</ElRadio
            >
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem
          label="每次锻炼时间"
          prop="a00_04_25"
          :required="['1', '2', '3'].includes(formModel.a00_04_24 || '')"
        >
          <ElInput
            v-model="formModel.a00_04_25"
            :disabled="['4', undefined].includes(formModel.a00_04_24)"
          >
            <template #append> 分钟</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem
          label="坚持锻炼时间"
          prop="a00_04_26"
          :required="['1', '2', '3'].includes(formModel.a00_04_24 || '')"
        >
          <ElInput
            v-model="formModel.a00_04_26"
            :disabled="['4', undefined, ''].includes(formModel.a00_04_24)"
          >
            <template #append> 年</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem label="锻炼方式" prop="a00_04_27">
          <ElCheckboxGroup
            @change="handleArrayExcludeClear($event, '4', ['a00_04_27_s'])"
            v-model="formModel.a00_04_27_v"
            :disabled="['4', undefined, ''].includes(formModel.a00_04_24)"
          >
            <ElCheckbox
              v-for="(value, key) in formSource.a00_04_27_v"
              :key="key"
              :label="key"
            >
              {{ value }}
            </ElCheckbox>
          </ElCheckboxGroup>
          <ElFormItem
            prop="a00_04_27_s"
            label=" "
            :required="formModel.a00_04_27_v?.includes('4')"
          >
            <ElInput
              v-model="formModel.a00_04_27_s"
              :disabled="!formModel.a00_04_27_v?.includes('4')"
              maxlength="15"
              show-word-limit
            />
          </ElFormItem>
        </ElFormItem>
      </CardBox>

      <br />
      <CardBox header="饮食方式">
        <ElFormItem>
          <ElCheckboxGroup v-model="formModel.a00_04_28">
            <ElCheckbox
              @change="handleMutuallyExclusive(key,'a00_04_28',['1','2','3'])"
              v-for="(value, key) in formSource.a00_04_28"
              :key="key"
              :label="key"
            >
              {{ value }}
            </ElCheckbox>
          </ElCheckboxGroup>
        </ElFormItem>
      </CardBox>
      <br />

      <CardBox header="吸烟情况">
        <ElFormItem prop="a00_04_29" label="吸烟状况">
          <ElRadioGroup
            v-model="formModel.a00_04_29"
            @change="
              handleStringIncludeClear($event, '1', [
                'a00_04_30',
                'a00_04_31',
                'a00_04_32',
              ]),
                handleStringExcludeClear($event, '2', ['a00_04_32'])
            "
          >
            <ElRadio
              v-for="(value, key) in formSource.a00_04_29"
              :key="key"
              :label="key"
              >{{ value }}</ElRadio
            >
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_30"
          label="平均"
          :required="!['1', '', undefined].includes(formModel.a00_04_29)"
        >
          <ElInput
            type="number"
            class="input-number-width"
            v-model="formModel.a00_04_30"
            :max="30"
            :min="0"
            :disabled="['1', '', undefined].includes(formModel.a00_04_29)"
          >
            <template #append>支/日</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_31"
          label="开始吸烟年龄"
          :required="!['1', '', undefined].includes(formModel.a00_04_29)"
        >
          <ElInput
            class="input-number-width"
            v-model="formModel.a00_04_31"
            :max="150"
            :min="0"
            type="number"
            :disabled="['1', '', undefined].includes(formModel.a00_04_29)"
          >
            <template #append>岁</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_32"
          label="戒烟年龄"
          :required="formModel.a00_04_29 === '2'"
        >
          <ElInput
            class="input-number-width"
            v-model="formModel.a00_04_32"
            :max="150"
            :min="0"
            type="number"
            :disabled="formModel.a00_04_29 !== '2'"
          >
            <template #append>岁</template>
          </ElInput>
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="饮酒情况">
        <ElFormItem prop="a00_04_33" label="饮酒频率">
          <ElRadioGroup
            v-model="formModel.a00_04_33"
            @change="
              handleStringIncludeClear($event, '1', [
                'a00_04_34',
                'a00_04_35',
                'a00_04_36',
                'a00_04_37',
                'a00_04_38',
                'a00_04_39',
                'a00_04_40',
              ])
            "
          >
            <ElRadio
              v-for="(value, key) in formSource.a00_04_33"
              :key="key"
              :label="key"
              >{{ value }}</ElRadio
            >
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_34"
          label="平均"
          :required="!['1', '', undefined].includes(formModel.a00_04_33)"
        >
          <ElInput
            :disabled="['1', '', undefined].includes(formModel.a00_04_33)"
            type="number"
            v-model="formModel.a00_04_34"
            title="注:折合成白酒量(啤酒/10=白酒量，红酒/4=白酒量，黄酒/5=白酒量)"
          >
            <template #append> 两/日</template>
          </ElInput>
        </ElFormItem>

        <ElFormItem prop="a00_04_35" label="是否戒酒">
          <ElRadioGroup
            v-model="formModel.a00_04_35"
            :disabled="['1', '', undefined].includes(formModel.a00_04_33)"
            @change="handleStringIncludeClear($event, '1', ['a00_04_36'])"
          >
            <ElRadio label="1">未戒酒</ElRadio>
            <ElRadio label="2">已戒酒</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_36"
          label="戒酒年龄"
          :required="formModel.a00_04_35 === '2'"
        >
          <ElInput
            class="input-number-width"
            type="number"
            v-model="formModel.a00_04_36"
            :disabled="formModel.a00_04_35 !== '2'"
          >
            <template #append>岁</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_37"
          label="开始饮酒年龄"
          :required="!['1', '', undefined].includes(formModel.a00_04_33)"
        >
          <ElInput
            class="input-number-width"
            type="number"
            v-model="formModel.a00_04_37"
            :disabled="['1', '', undefined].includes(formModel.a00_04_33)"
          >
            <template #append> 岁</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem prop="a00_04_38" label="近一年内是否曾醉酒">
          <ElRadioGroup
            v-model="formModel.a00_04_38"
            :disabled="['1', '', undefined].includes(formModel.a00_04_33)"
          >
            <ElRadio label="1">是</ElRadio>
            <ElRadio label="2">否</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem label="饮酒品种" prop="a00_04_39">
          <ElCheckboxGroup
            v-model="formModel.a00_04_39"
            :disabled="['1', '', undefined].includes(formModel.a00_04_33)"
            @change="handleArrayExcludeClear($event, '5', ['a00_04_40'])"
          >
            <ElCheckbox
              v-for="(value, key) in formSource.a00_04_39"
              :key="key"
              :label="key"
              >{{ value }}</ElCheckbox
            >
          </ElCheckboxGroup>
          <!-- TODO:必填有问题，待解决-->
          <ElFormItem
            prop="a00_04_40"
            label=" "
            :required="formModel.a00_04_39?.includes['5']"
          >
            <ElInput
              v-model="formModel.a00_04_40"
              :disabled="!formModel.a00_04_39?.includes('5')"
              maxlength="15"
              show-word-limit
            />
          </ElFormItem>
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="职业病危害因素接触史">
        <ElFormItem>
          <ElRadioGroup
            v-model="formModel.a00_04_41"
            @change="
              handleStringIncludeClear($event, '1', [
                'a00_04_190',
                'a00_04_191',
                'a00_04_189',
                'a00_04_45',
                'a00_04_46',
                'a00_04_44',
                'a00_04_187',
                'a00_04_188',
                'a00_04_186',
                'a00_04_51',
                'a00_04_52',
                'a00_04_50',
                'a00_04_49',
                'a00_04_48',
                'a00_04_47',
                'a00_04_43',
                'a00_04_42',
              ])
            "
          >
            <ElRadio label="1">无</ElRadio>
            <ElRadio label="2">有</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem
          label="具体职业"
          prop="a00_04_42"
          :required="formModel.a00_04_41 === '2'"
        >
          <ElInput
            v-model="formModel.a00_04_42"
            :disabled="formModel.a00_04_41 !== '2'"
            show-word-limit
            placeholder="职业病危害具体职业最多输入10个汉字"
            maxlength="10"
          />
        </ElFormItem>
        <ElFormItem
          label="从业时间"
          prop="a00_04_43"
          :required="formModel.a00_04_41 === '2'"
        >
          <ElInput
            v-model="formModel.a00_04_43"
            :disabled="formModel.a00_04_41 !== '2'"
            type="number"
            maxlength="200"
          >
            <template #append> 年</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem label="毒物种类">
          <div>
            <ElFormItem label="粉尘" label-width="80px">
              <ElInput
                v-model="formModel.a00_04_47"
                maxlength="25"
                show-word-limit
                :disabled="formModel.a00_04_41 !== '2'"
              />
            </ElFormItem>
            <ElFormItem label="防护措施">
              <ElRadioGroup
                v-model="formModel.a00_04_48"
                :disabled="formModel.a00_04_41 !== '2'"
                @change="handleStringIncludeClear($event, '1', ['a00_04_49'])"
              >
                <ElRadio label="1">无</ElRadio>
                <ElRadio label="2">有</ElRadio>
                <ElFormItem
                  prop="a00_04_49"
                  :required="formModel.a00_04_48 === '2'"
                >
                  <ElInput
                    maxlength="25"
                    show-word-limit
                    v-model="formModel.a00_04_49"
                    :disabled="formModel.a00_04_48 !== '2'"
                  />
                </ElFormItem>
              </ElRadioGroup>
            </ElFormItem>
          </div>

          <div style="margin-top: 10px">
            <ElFormItem label="放射物质" label-width="80px">
              <ElInput
                v-model="formModel.a00_04_50"
                maxlength="25"
                show-word-limit
                :disabled="formModel.a00_04_41 !== '2'"
              />
            </ElFormItem>
            <ElFormItem label="防护措施">
              <ElRadioGroup
                v-model="formModel.a00_04_51"
                :disabled="formModel.a00_04_41 !== '2'"
                @change="handleStringIncludeClear($event, '1', ['a00_04_52'])"
              >
                <ElRadio label="1">无</ElRadio>
                <ElRadio label="2">有</ElRadio>
                <ElFormItem
                  prop="a00_04_52"
                  :required="formModel.a00_04_51 === '2'"
                >
                  <ElInput
                    maxlength="25"
                    show-word-limit
                    v-model="formModel.a00_04_52"
                    :disabled="formModel.a00_04_51 !== '2'"
                  />
                </ElFormItem>
              </ElRadioGroup>
            </ElFormItem>
          </div>
          <div style="margin-top: 10px">
            <ElFormItem label="物理因素" label-width="80px">
              <ElInput
                v-model="formModel.a00_04_186"
                maxlength="25"
                show-word-limit
                :disabled="formModel.a00_04_41 !== '2'"
              />
            </ElFormItem>
            <ElFormItem label="防护措施">
              <ElRadioGroup
                v-model="formModel.a00_04_187"
                :disabled="formModel.a00_04_41 !== '2'"
                @change="handleStringIncludeClear($event, '1', ['a00_04_188'])"
              >
                <ElRadio label="1">无</ElRadio>
                <ElRadio label="2">有</ElRadio>
                <ElFormItem
                  prop="a00_04_188"
                  :required="formModel.a00_04_187 === '2'"
                >
                  <ElInput
                    maxlength="25"
                    show-word-limit
                    v-model="formModel.a00_04_188"
                    :disabled="formModel.a00_04_187 !== '2'"
                  />
                </ElFormItem>
              </ElRadioGroup>
            </ElFormItem>
          </div>

          <div style="margin-top: 10px">
            <ElFormItem label="化学物质" label-width="80px">
              <ElInput
                v-model="formModel.a00_04_44"
                maxlength="25"
                show-word-limit
                :disabled="formModel.a00_04_41 !== '2'"
              />
            </ElFormItem>
            <ElFormItem label="防护措施">
              <ElRadioGroup
                v-model="formModel.a00_04_45"
                :disabled="formModel.a00_04_41 !== '2'"
                @change="handleStringIncludeClear($event, '1', ['a00_04_46'])"
              >
                <ElRadio label="1">无</ElRadio>
                <ElRadio label="2">有</ElRadio>
                <ElFormItem
                  prop="a00_04_188"
                  :required="formModel.a00_04_45 === '2'"
                >
                  <ElInput
                    maxlength="25"
                    show-word-limit
                    v-model="formModel.a00_04_46"
                    :disabled="formModel.a00_04_45 !== '2'"
                  />
                </ElFormItem>
              </ElRadioGroup>
            </ElFormItem>
          </div>

          <div style="margin-top: 10px">
            <ElFormItem label="其他" label-width="80px">
              <ElInput
                v-model="formModel.a00_04_189"
                maxlength="25"
                show-word-limit
                :disabled="formModel.a00_04_41 !== '2'"
              />
            </ElFormItem>
            <ElFormItem label="防护措施">
              <ElRadioGroup
                v-model="formModel.a00_04_190"
                :disabled="formModel.a00_04_41 !== '2'"
                @change="handleStringIncludeClear($event, '1', ['a00_04_191'])"
              >
                <ElRadio label="1">无</ElRadio>
                <ElRadio label="2">有</ElRadio>
                <ElFormItem
                  prop="a00_04_188"
                  :required="formModel.a00_04_190 === '2'"
                  :show-message="false"
                >
                  <ElInput
                    maxlength="25"
                    show-word-limit
                    v-model="formModel.a00_04_191"
                    :disabled="formModel.a00_04_190 !== '2'"
                  />
                </ElFormItem>
              </ElRadioGroup>
            </ElFormItem>
          </div>
        </ElFormItem>
      </CardBox>
    </el-form>
  </ElCard>
</template>

<script lang="ts" setup>
import { ILifeStyle } from "@/model";
import { reactive, ref, toRaw, watch } from "vue";
import { tjwx } from "@/dict";
import formUtils from "./formUtils";
import { ElForm } from "element-plus";
import { cloneDeep } from "lodash-es";

const props = defineProps<{
  lifestyle: Partial<ILifeStyle>;
  isVisible:boolean
}>();
watch(()=>{
  return props.isVisible
},(val)=>{
  //   激活状态，处理事件
    console.log(val)
})
const formSource = reactive(tjwx);
const formModel = ref(cloneDeep(props.lifestyle));
// watch(
//   () => {
//     return props.lifestyle;
//   },
//   (val) => {
//     formModel.value = val;
//   }
// );
const {
  handleMutuallyExclusive,
  handleStringExcludeClear,
  handleArrayExcludeClear,
  handleStringIncludeClear,
} = formUtils(formModel);
const formRef = ref<InstanceType<typeof ElForm>>();
const validateForm = () => {
  return formRef.value?.validate();
};

const getData = () => {
  return toRaw(formModel.value);
};

defineExpose({ validateForm, getData });
</script>
<style scoped lang="scss"></style>
